{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}
<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>
<h1>英雄排行</h1>

<table border=1px id="mytab">
<tr><td>排名</td><td>姓名</td><td>外号</td></tr>
<tr><td>1</td><td>宋江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>


<h1>请输入好汉</h1>
排行<input type="text" id="no" /><br/>
名字<input type="text" id="username" /><br/>
外号<input type="text" id="nickname" /><br/>
号<input type="button" onclick="addHero()" value="添加" />
<h6>代码</h6>
<pre>
		页面

		&lt;table border=1px id="mytab"&gt;
		&lt;tr&gt;&lt;td&gt;排名&lt;/td&gt;&lt;td&gt;姓名&lt;/td&gt;&lt;td&gt;外号&lt;/td&gt;&lt;/tr&gt;
		&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;宋江&lt;/td&gt;&lt;td&gt;及时雨&lt;/td&gt;&lt;/tr&gt;
		&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;卢俊义&lt;/td&gt;&lt;td&gt;玉麒麟&lt;/td&gt;&lt;/tr&gt;
		&lt;/table&gt;
		
		
		&lt;h1&gt;请输入好汉&lt;/h1&gt;
		排行&lt;input type="text" id="no" /&gt;&lt;br/&gt;
		名字&lt;input type="text" id="username" /&gt;&lt;br/&gt;
		外号&lt;input type="text" id="nickname" /&gt;&lt;br/&gt;
		号&lt;input type="button" onclick="addHero()" value="添加" /&gt;
		
		js
		
		function addHero(){
			//获取用户输入的信息
			var newTableRow=mytab.insertRow(mytab.rows.length);
			
			newTableRow.insertCell(0).innerText=no.value;
			newTableRow.insertCell(1).innerText=username.value;
			newTableRow.insertCell(2).innerText=nickname.value;
		}
		&lt;/script&gt;

	 </pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">
function addHero(){
	//获取用户输入的信息
	var newTableRow=mytab.insertRow(mytab.rows.length);
	
	newTableRow.insertCell(0).innerText=no.value;
	newTableRow.insertCell(1).innerText=username.value;
    newTableRow.insertCell(2).innerText=nickname.value;
}
</script> {/block}